import React from 'react';
import {Dimensions, Image, LayoutAnimation, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
import PropTypes from 'prop-types';
import FadeImage from './FadeImage';
import AutoSizingImage from './AutoSizingImage';
import FastImage from 'react-native-fast-image';
import Carousel from 'teaset/components/Carousel/Carousel';

const WIN_WIDTH = Dimensions.get('window').width;

class BannerView extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {loaded: false, height: props.height || 0, firstImageLoaded: false, width: 0};
    }

    renderImages() {
        const props = this.props;
        return props.images.map((value, index) => {
            if (props.renderItem) {
                return props.renderItem(value, index);
            }
            return <TouchableWithoutFeedback key={index} onPress={() => props.onPress && props.onPress(index)}>
                <View>
                    {(typeof (value) === 'number') ?
                        <Image source={value} style={{height: this.state.height, width: props.width}}
                               resizeMode={'cover'}/> : <FadeImage source={{uri: value}}
                                                                   style={{
                                                                       height: this.state.height,
                                                                       width: props.width, backgroundColor:'green'
                                                                   }}
                                                                   resizeMode={FastImage.resizeMode.cover}
                        />}
                </View>
            </TouchableWithoutFeedback>
                ;
        });
    }

    componentDidMount() {
        setTimeout(() => {
            this.carousel && this.carousel.scrollToCard(1, true);
            setTimeout(() => {
                this.setState({loaded: true});
            }, 1000);
        }, 500);
    }

    render() {
        const props = this.props;
        return <View style={{...props.style, height: this.state.height, alignItems: 'center', justifyContent: 'center', overflow:'hidden'}} onLayout={(event)=>{
            let {width} = event.nativeEvent.layout;
            this.setState({width});
        }}>
            {this.props.height || this.state.firstImageLoaded ? <Carousel carousel={true} style={{height: this.state.height, width: props.width}}
                                                                          interval={props.interval}
                                                                          cycle={true}
                                                                          startIndex={0}
                                                                          ref={v => this.carousel = v}
                                                                          onChange={(index, total) => this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(null, {index: index})}
                                                                          control={props.control }>
                {this.renderImages()}
            </Carousel> : null}
            {(this.state.loaded || props.images.length === 0) ? null : this.renderDefaultView()}
        </View>;
    }

    renderDefaultView(){
        const props = this.props;
        if (this.props.renderItem) {
            return <View style={StyleSheet.absoluteFill}>
                {this.props.renderItem(this.props.images[0], 0)}
            </View>;
        }
        else {
            return <View style={{width: props.width, position:'absolute', top:0, right:0, bottom:0, left:0}}>
                <AutoSizingImage source={typeof (props.images[0]) === 'number' ? props.images[0] : {uri: props.images[0]}}
                                 onLoad={(event)=>{
                                     console.log(event.nativeEvent);
                                     if (event.nativeEvent) {
                                         let {height, width} = event.nativeEvent;
                                         if (!this.props.height) {
                                             this.setState({height: height / width * this.state.width, firstImageLoaded: true});
                                         }
                                     }
                                 }}
                                 width={props.width}
                />
            </View>;
        }
    }
}


BannerView.propTypes = {
    height: PropTypes.number,
    images: PropTypes.array,
    onPress: PropTypes.func,
    width: PropTypes.number,
    interval: PropTypes.number,
    onMomentumScrollEnd: PropTypes.func,
    renderItem: PropTypes.func,
    control: PropTypes.object
};

BannerView.defaultProps = {
    width: WIN_WIDTH,
    interval: 3000,
    control:  <Carousel.Control dot={<View style={{
        backgroundColor: 'white',
        width: 8,
        height: 8,
        borderRadius: 4,
        marginLeft: 3,
        marginRight: 3,
        marginTop: 3,
    }}/>} activeDot={<View style={{
        backgroundColor: '#4DC157',
        width: 8,
        height: 8,
        borderRadius: 4,
        marginLeft: 3,
        marginRight: 3,
        marginTop: 3,
    }}/>}/>
};

export default BannerView;
